<template>
  <div class="container">
    <div style="height: 10px"></div>
    <view class="all">
      <!-- 内容切换 -->
      <view class="content">
        <div class="card">
          <div style="height: 10px"></div>
          <div class="card-top">
            <div style=" text-align: center;font-size: 18px;font-weight: 600;">基础信息</div>
          </div>
          <div style="height: 10px"></div>
          <u-line color="gray"></u-line>
          <div style="height: 15px;"></div>
          <div class="newFlex">
            <div>订单号码</div>
            <div>{{ obj.id }}</div>
          </div>
          <div style="height: 15px;"></div>
          <div class="newFlex">
            <div>派单时间</div>
            <div>{{ obj.launchTime }}</div>
          </div>
          <div style="height: 15px;"></div>
          <div class="newFlex">
            <div>工单类型</div>
            <div>{{ obj.workOrderType == 0 ? "自派单" : obj.workOrderType == 1 ? '手工单' : '' }}</div>
          </div>
          <div style="height: 15px;"></div>
          <div class="newFlex">
            <div>有机质类型</div>
            <div>{{ obj.vehicleOrganicType }}</div>
          </div>
          <div style="height: 15px;"></div>
          <div class="newFlex">
            <div>车牌号</div>
            <div>{{ obj.licenseNumber }}</div>
          </div>
          <div style="height: 15px;"></div>
          <!-- <div style="font-size: 14px;">
                <div v-for="items in obj.workOrderDetailVOList">
                    <u-line color="#000000"></u-line>
            <div style="height: 10px"></div>
                    <div style="display: flex;align-items: center;width: 90%;margin-left: 5%;">
                    <div>任务状态：</div>
                    <div>{{ items.workOrderDetailState == 0 ? "待收运" : items.workOrderDetailState==1?'已完成':'报停中' }}</div>
                    <div style="width: 10px;"></div>
                    <div>2023.13.13</div>
                </div>
                <div style="height: 15rpx;"></div>
                <div style="display: flex;align-items: center;width: 90%;margin-left: 5%;">
                    <div>收运点：</div>
                    <div>{{ items.farmName }}</div>
                </div>
                <div style="height: 15rpx;"></div>
                <div style="display: flex;align-items: center;width: 90%;margin-left: 5%;">
                    <div>收运点负责人：</div>
                    <div>{{ items.contactName }}{{ items.contactPhone }}</div>
                </div>
                <div style="height: 15rpx;"></div>
                <div style="display: flex;align-items: center;">
                    <div style="display: flex;align-items: center;width: 90%;margin-left: 5%;">
                    <div>预约时间：</div>
                    <div>{{ items.appointTime }}</div>
                    </div>
                    <div @click="addressTo(items.lat,items.lon,items.farmName)"><image src="https://28-1325662301.cos.ap-shanghai.myqcloud.com/static%2Farrow.jpg" style="width: 60rpx;height: 60rpx;" mode="scaleToFill"/></div>
                    <div style="width: 5px;"></div>
                </div>
                <div style="height: 15rpx;"></div>
                </div>
           </div> -->
          <div style="height: 10rpx"></div>
        </div>
        <div style="height: 10px;"></div>
        <div class="card" v-for="items in obj.workOrderDetailVOList">
          <div style="height: 10px"></div>
          <div class="card-top">
            <div style=" text-align: center;font-size: 18px;font-weight: 600;">收运点信息</div>
          </div>
          <div style="height: 10px"></div>
          <u-line color="gray"></u-line>
          <div style="height: 15px;"></div>
          <div class="newFlex">
            <div>收运点</div>
            <div>{{ items.farmName }}</div>
          </div>
          <div style="height: 15px;"></div>
          <div class="newFlex">
            <div>收运点负责人</div>
            <div>{{ items.contactName }}</div>
          </div>
          <div style="height: 15px;"></div>
          <div class="newFlex">
            <div>负责人电话</div>
            <div>{{ items.contactPhone }}</div>
          </div>
          <div style="height: 15px;"></div>
          <div class="newFlex">
            <div>任务状态</div>
            <div>{{ items.workOrderDetailState == 0 ? "待收运" : items.workOrderDetailState == 1 ? '已完成' : '报停中' }}</div>
          </div>
          <div style="height: 15px;"></div>
          <div class="newFlex">
            <div>任务完成时间</div>
            <div>{{ items.appointTime }}</div>
          </div>
          <div style="height: 15px;"></div>
          <!-- <div style="font-size: 14px;">
                <div v-for="items in obj.workOrderDetailVOList">
                    <u-line color="#000000"></u-line>
            <div style="height: 10px"></div>
                    <div style="display: flex;align-items: center;width: 90%;margin-left: 5%;">
                    <div>任务状态：</div>
                    <div>{{ items.workOrderDetailState == 0 ? "待收运" : items.workOrderDetailState==1?'已完成':'报停中' }}</div>
                    <div style="width: 10px;"></div>
                    <div>2023.13.13</div>
                </div>
                <div style="height: 15rpx;"></div>
                <div style="display: flex;align-items: center;width: 90%;margin-left: 5%;">
                    <div>收运点：</div>
                    <div>{{ items.farmName }}</div>
                </div>
                <div style="height: 15rpx;"></div>
                <div style="display: flex;align-items: center;width: 90%;margin-left: 5%;">
                    <div>收运点负责人：</div>
                    <div>{{ items.contactName }}{{ items.contactPhone }}</div>
                </div>
                <div style="height: 15rpx;"></div>
                <div style="display: flex;align-items: center;">
                    <div style="display: flex;align-items: center;width: 90%;margin-left: 5%;">
                    <div>预约时间：</div>
                    <div>{{ items.appointTime }}</div>
                    </div>
                    <div @click="addressTo(items.lat,items.lon,items.farmName)"><image src="https://28-1325662301.cos.ap-shanghai.myqcloud.com/static%2Farrow.jpg" style="width: 60rpx;height: 60rpx;" mode="scaleToFill"/></div>
                    <div style="width: 5px;"></div>
                </div>
                <div style="height: 15rpx;"></div>
                </div>
           </div> -->
          <div class="daoh" @click="addressTo(items.lat, items.lon, items.farmName)">导航到收运点</div>
          <div style="height: 10px"></div>
        </div>
        <div style="height: 30rpx"></div>
         
        <div class="statused" v-if="obj.workOrderState == 6" @click="cancel">取消报停</div>
        <div style="height: 15rpx"></div>
        <div class="status" v-if="obj.workOrderState == 6" @click="look">查看报停</div>
      </view>
    </view>
  </div>
</template>
<script>
import { cancelStops } from '../api/api.js';
export default {
  data() {
    return {
      obj: {},
    };
  },
  methods: {
    look() {
      uni.setStorageSync('vehicleId', this.obj.vehicleId);
      uni.navigateTo({
        url: '/pagesDispatch/index/lookStop'
      })
    },
    // 取消任务
    cancel() {
      uni.showModal({
        title: '取消报停',
        content: '确认要取消当前报停吗',
        showCancel: true,
        success: ({ confirm, cancel }) => {
          if (confirm) {
            cancelStops({
              id: this.obj.id
            }).then(res => {
              if (res.data.code == 200) {
                uni.showToast({
                  title: res.data.msg,
                  icon: 'none'
                })
                setTimeout(() => {
                  uni.navigateBack({
                    delta: 1
                  });
                }, 1000)
              } else {
                uni.showToast({
                  title: res.data.msg,
                  icon: 'none',
                  duration: 3000
                })
              }
            })
          } else {
            uni.showToast({
              title: '取消',
              icon: 'none',
              mask: true
            })
          }
        }
      })
    },
    // 导航
    addressTo(lat, lon, name) {
      console.log(lat, lon, name);
      uni.getLocation({
        type: 'gcj02', //返回可以用于uni.openLocation的经纬度
        success: function (res) {
          console.log(res, 'res');
          uni.openLocation({
            latitude: parseFloat(lat),
            longitude: parseFloat(lon),
            name: name,
            success: function () {
              console.log('success');
            }
          });
        },
        fail: (err => {
          console.log(err, 'err');
        })
      });
      //         uni.getLocation({
      // 	type: 'gcj02', //返回可以用于uni.openLocation的经纬度
      // 	success: function (res) {
      //     console.log(res,'res');
      // 		const latitude = res.latitude;
      // 		const longitude = res.longitude;
      // 		uni.openLocation({
      // 			latitude: latitude,
      // 			longitude: longitude,
      //       name:"XX收运点",
      // 			success: function () {
      // 				console.log('success');
      // 			},
      //       fail:function(err){
      //         console.log(err,'err');
      //       }
      // 		});
      // 	}
      // });
    }
  },
  onLoad() { },
  onShow() {
    this.obj = uni.getStorageSync('driverTaskDetail');
    console.log(this.obj, 'qwrh');
  }
};
</script>
<style lang="scss">
.container {
  height: 100vh;
  width: 100vw;
  background: #f3f3f3;
  color: #000000;
}

.head-nav {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.activite {
  border-bottom: 2px solid #1a512c;
}

.card {
  width: 95%;
  margin-left: 2.5%;
  margin-top: 10px;
  border-radius: 10px;
  background: #ffffff;

  .card-top {
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    margin-left: 5%;
  }
}

.items {
  display: flex;
  align-items: center;
  width: 90%;
  margin-left: 5%;
  justify-content: space-between;
  font-size: 14px;
}

.table {
  width: 90%;
  margin-left: 5%;
}

.status {
  color: #fff;
  background: #000000;
  width: 95%;
  margin-left: 2.5%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 45px;
  border-radius: 3px;
}

.statused {
  color: #fff;
  background: #EE5555;
  width: 95%;
  margin-left: 2.5%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 45px;
  border-radius: 3px;
}

.newFlex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  margin-left: 5%;
}

.daoh {
  display: flex;
  align-items: center;
  height: 45px;
  background: #000000;
  color: #fff;
  border-radius: 6px;
  justify-content: center;
  width: 90%;
  margin-left: 5%;
}
</style>